import React from 'react'
import { View,Text,Image,StyleSheet, ScrollView } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const Happy = () => {
    return (
        <ScrollView id="container" style={styles.container}>
            <View style={styles.part1}>
                <Image style={styles.avatar} resizeMode="stretch" source={require('./img/con4.jpg')} />
                <Text id="name" style={styles.name}>师大张艺兴</Text>
            </View>
            <View style={styles.part2}>
                <Text id="article" style={styles.article}>我害怕鬼，但鬼未伤我分毫。我不害怕人，但人把我伤的遍体鳞伤。</Text>
            </View>
            <View style={styles.part3}>
                <Image id="conImg" style={styles.conImg} source={require('./img/con4.jpg')} />
                <Image id="conImg" style={styles.conImg} source={require('./img/con2.jpg')} />
                <Image id="conImg" style={styles.conImg} source={require('./img/con1.jpg')} />
        
            </View>
            <View style={styles.part4}>
                
                <View style={styles.part41}>
                    <View style={styles.bestCom}>
                        <Icon name="baby-face-outline" style={styles.face} size={30}/>
                        <Text style={{fontSize:17,color:'#fff',marginLeft:1}}>神评</Text>
                    </View>
                    <Icon name="arrow-up-bold-outline" style={styles.arrowup} size={36} />
                    <Text style={{fontSize:18,marginLeft:6,color:'#3C94CD'}}>4.7W</Text>
                    <Icon name="arrow-down-bold-outline" style={styles.arrowdown} size={36} />
                </View>
                <View style={styles.part42}>
                    <Text id="article" style={styles.article}>我害怕鬼，但鬼未伤我分毫。我不害怕人，但人把我伤的遍体鳞伤。</Text>
                </View>
                <View style={styles.part43}>
                    <Image id="conImg" style={styles.conImg} source={require('./img/con4.jpg')} />
                    <Image id="conImg" style={styles.conImg} source={require('./img/con2.jpg')} />
                    <Image id="conImg" style={styles.conImg} source={require('./img/con1.jpg')} />
                    
                </View>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    bestCom:{
        width:ptd(64),
        backgroundColor:'#FF7A87',
        flexDirection:'row',
        alignItems:'center',
        borderRadius:20,
        paddingLeft:3
    },
    face:{
        color:'#FDE702'
    },
    container: {
        margin: 0,
        padding: 0,
        backgroundColor:'#fff'
    },
    part1: {
        paddingLeft:20,
        paddingTop:16,
        paddingBottom:8,
        flexDirection:'row', 
        alignItems:'center'
    },
    part2: {
        paddingTop:8,
        paddingLeft:20,
        paddingBottom:8,
        flexDirection:'row', 
        alignItems:'center'
    },
    part3:{
        paddingLeft:20,
        paddingTop:8,
        paddingBottom:8,
        flexDirection:'row',
        flexWrap: 'wrap',

    },
    part4:{
        width:ptd(340),
        backgroundColor:'#F5F5F7',
        marginTop:30,
        marginLeft:20,
        marginRight:20,
        marginBottom:20,
        padding:10,
        borderRadius:10
    },
    part41:{
        // backgroundColor:'blue',
        flexDirection:'row', 
        alignItems:'center',
    },
    part42:{
        // backgroundColor:'blue',
        flexDirection:'row', 
        alignItems:'center',
    },
    part43:{
        flexDirection:'row',
        flexWrap: 'wrap',
        paddingTop:20
    },
    arrowup:{
        color:'#3C94CD',
        marginLeft:ptd(150)
    },
    arrowdown:{
        color:'#3C94CD',
        marginLeft:ptd(6)
    },
    avatar: {
        // backgroundColor:'blue', 
        width: ptd(40), 
        height: ptd(40),
        borderRadius:ptd(100)
    },
    name: {
        // backgroundColor:'green',
        marginLeft:ptd(12),
        fontSize:19, 
        color:'#5A5B5F'
    },
    article: {
        fontSize:20
    },
    conImg:{
        backgroundColor:'yellow',
        width: ptd(130), 
        height: ptd(130),
        borderRadius:ptd(8),
        marginRight:6,
        marginBottom:6,
        borderColor:'#ddd',
        borderWidth:1
    }
})

export default Happy
